<template>
  <div>
    <h2>Scoped父组件</h2>
    <Son></Son>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name:'Scoped'
  })
</script>
<script lang="ts" setup>
// 引入组件
import Son from './son.vue'
</script>

<!-- 1.不加scoped 所有后代的组件当中都生效
<style lang="scss">
h2 {
  color: red;
}
</style>
-->

<!-- 2.加了scoped只在本组件生效
<style lang="scss" scoped>
h2 {
  color: red;
}
</style> 
-->

<!-- 3. 如果加了scoped还想在子组件生效就需要深度作用选择器:deep(需要的样式选择器) -->
<!-- <style lang="scss" scoped >
:deep(h2) {
  color: red;
}
</style> -->

<!-- 4.原生css写法 如果加了scoped还想在子组件生效就需要深度作用选择器 -->
<style scoped>
div >>> h2 {
  color: red;
}
</style>

<!-- 
  1. scoped的作用
	scoped本意是作用域的意思，在style身上添加scoped是在限制这个style的样式作用域
	如果style当中没有添加scoped，那么内部所写的样式会影响其它组件
		如果其它组件当中也有和这个组件一样的选择器，那么选中的元素也会被影响到（整个页面）

	如果style当中添加scoped，那么内部所写的样式被限定了作用域
		在style当中添加了scoped会让样式作用域被限定在本组件内部和子组件的根标签
		如果子组件的根标签和样式的选择器一样，那么也能被影响到

  2. 总结：想让一个元素有样式必须符合两个条件
	1)scoped能够作用到，也就是添加标识数据
	2)样式的选择器必须能选择到

  3. 原理是什么（怎么做到的）
	如果style添加scoped，那么它是靠添加标识数据来限定作用域的
	添加了scoped，本组件的所有元素以及子组件的跟标签，最后解析完都会添加一个data-v-xxxx的
  一个标识数据，只要有这个标识数据，就代表样式，可以影响到这些区域
	虽然这样能确定style当中的样式会影响到哪，但是还要保证元素的选择器是正确的，才能生效

  4. 具体实现其实就是用css选择器来限定样式，把标识数据作为元素的一个特殊属性
	如果不添加scoped，样式最终是
	h2:{
		color:hotpink
	}

	如果加了scoped，样式最终是
	h2[data-v-38fc2d66] {
	    color: hotpink;
	}

  5. 有些组件标签添加样式就可以生效，有些组件添加样式就不能生效
	生效的样式，我们样式的作用域一定是作用到了       恰好选择器选中的就是组件的根标签
	没生效的样式，我们样式的作用域一定是没作用到     选择器选中的根本不是组件的根标签，而是子组件根标签内部的元素

  6.如何解决？
	1、把不生效的样式不加scoped，重新写一个style
		样式是没有作用域限定的，也就是说子组件里面不管什么元素，只要选择器符合就可以生效
		一般使用的比较少，因为在使用的时候需要限定区域，不能让整个页面所有相关的元素，全部改变

	2、在加scoped的style中使用深度作用选择器 ***************************************
		让选择器发生改变，继续往子组件根标签内部的元素身上去选

		深度作用选择器，在vue2当中去使用的时候和vue3当中使用的时候是不一样de

		vue3中，我们需要用 :deep(需要的样式选择器)

		vue2中：
			采用在需要的选择器前面  ::v-deep

		  原生的写法：要用父元素选择器  >>> 需要的选择器    一般不用


      深度作用选择器最终也是通过改变样式选择器来达到目标的

      1)如果加了scoped没有使用深度作用选择器，那么我们的样式

        h2[data-v-38fc2d66] {
            color: hotpink;
        }

			2)如果加了scoped也使用了深度作用选择器，那么我们的样式

				[data-v-38fc2d66] h2 {
				    color: hotpink;
				}

			一句话，如果不用深度选择器，那么标识数据属性选择器是在最右边的，和自己的选择器组成交集选择器，就选择不到
			       如果使用深度选择器，那么标识数据属性选择器是在左边的，和自己的选择器组成后代选择器，就可以被选择到
 -->
